<template>
  <div class="guide-wrapper">
    <div class="trip-guide">
      <h1 class="guide-title">旅游指南</h1>
      <el-row :gutter="20" class="guide-wrapper">
        <el-col :span="12">
          <ul class="tabs-list">
            <li v-for="tab in tabs" :key="tab.id" :class="{active: tabOn === tab.id}">
              <a @mouseover="tabOn = tab.id" :href="tab.url" target="_blank">
                {{tab.name}}
                <transition
                  enter-active-class="animated rotateIn"
                  leave-active-class="animated rotateOut"
                >
                  <img v-if="tabOn === tab.id" :src="tab.imgUrl">
                </transition>
              </a>
            </li>
          </ul>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="20">
            <el-col v-for="img in imgs" :key="img.id" :span="12">
              <div class="guide-grid">
                <a>
                  <img :src="img.url">
                  <p>{{img.name}}</p>
                </a>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
export default {
  name: "TripGuide",
  props: {
    guide: Object
  },
  data() {
    return {
      tabOn: "",
      tabs: [],
      imgs: []
    };
  },
  watch: {
    guide: {
      deep: true,
      handler: function(val) {
        this.tabs = val.tabs;
        this.imgs = val.imgs;
        this.tabOn = val.tabs[0].id;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/varibles.scss";

.flip-enter-active,
.flip-leave-active {
  transition: transform 1s;
}
.flip-enter,
.flip-leave-to {
  transform: scaleY(0);
}

.guide-wrapper {
  .trip-guide {
    .guide-title {
      padding: 0.5em 0;
      border-bottom: 2px solid $greenColor;
      font-size: 1.5rem;
      color: $greenColor;
    }
    .guide-wrapper {
      padding: 0.5em 0;
    }
    .tabs-list {
      position: relative;
      overflow: hidden;
      li {
        padding-left: 0.5em;
        line-height: 2.8em;
        border-bottom: 1px solid #ccc;
        overflow: hidden;
        a {
          text-decoration: none;
          color: #666;
        }
        img {
          width: 60%;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
      .active {
        background-color: $greenColor;
        a {
          color: #fff;
        }
      }
    }
    .guide-grid {
      position: relative;
      cursor: pointer;
      img {
        width: 100%;
      }
      p {
        position: absolute;
        left: 0;
        bottom: -1em;
        padding: 0.8em 0 0.8em 0.5em;
        width: 100%;
        font-size: 0.8rem;
        background-color: #f7f7f7;
        border-bottom: 1px solid #ccc;
        color: #666;
      }
    }
  }
}
</style>
